$(function () {
    layui.use(['element', 'table'], function () {
        const table = layui.table;
        const element = layui.element;
        table.render({
            elem: '#jqGrid',
            url: 'list',
            cellMinWidth: 80, //全局定义常规单元格的最小宽度
            cols: [[
                {field: 'tableName', title: '表名'},
                {field: 'tableComment', title: '表备注'},
                {field: 'engine', title: '引擎名'},
                {field: 'sameFlag', title: '是否一样'},
                {field: 'createTime', title: '创建时间'},
            ]]
        });
        table.render({
            elem: '#testTable',
            url: 'list/test',
            cellMinWidth: 80, //全局定义常规单元格的最小宽度
            cols: [[
                {field: 'tableName', title: '表名'},
                {field: 'tableComment', title: '表备注'},
                {field: 'engine', title: '引擎名'},
                {field: 'createTime', title: '创建时间'},
            ]]
        });
        table.render({
            elem: '#prodTable',
            url: 'list/prod',
            cellMinWidth: 80, //全局定义常规单元格的最小宽度
            cols: [[
                {field: 'tableName', title: '表名'},
                {field: 'tableComment', title: '表备注'},
                {field: 'engine', title: '引擎名'},
                {field: 'createTime', title: '创建时间'},
            ]]
        });
        //监听行双击事件
        table.on('rowDouble(listen)', function (obj) {
            $.ajax({
                type: "get",
                url: "getTable",
                data: {tableName: obj.data.tableName},
                dataType: "json",
                success: function (data) {
                    let testColumns = data.data['test']
                    let testStr = '<div style="margin: 10px;">' + '测试库' + obj.data.tableName + '表结构' + '</div>'
                    for (let i = 0; i < testColumns.length; i++) {
                        let column = testColumns[i]
                        if (column.same) {
                            testStr += '<div style="display: flex;justify-content: space-around;">';
                        } else {
                            testStr += '<div style="display: flex;justify-content: space-around;background: red;">';
                        }
                        testStr += '<span style="flex-basis: 100px;overflow: hidden;text-align: left">' + column.columnName + ' </span> ' +
                            '<span style="flex-basis: 60px;overflow: hidden;text-align: left"> ' + column.dataType + '</span> ' +
                            '<span style="flex-basis: 230px;overflow: hidden;text-align: left"> ' + column.columnComment + ' </span>' +
                            '</div>'
                    }
                    $("#test").html(testStr)
                    let prodColumns = data.data['prod']
                    let prodStr = '<div style="margin: 10px;">' + '正式库' + obj.data.tableName + '表结构' + '</div>'
                    for (let i = 0; i < prodColumns.length; i++) {
                        let column = prodColumns[i]
                        if (column.same) {
                            prodStr += '<div style="display: flex;justify-content: space-around;">';
                        } else {
                            prodStr += '<div style="display: flex;justify-content: space-around;background: red;">';
                        }
                        prodStr += '<span style="flex-basis: 100px;overflow: hidden;text-align: left">' + column.columnName + ' </span> ' +
                            '<span style="flex-basis: 60px;overflow: hidden;text-align: left"> ' + column.dataType + '</span> ' +
                            '<span style="flex-basis: 230px;overflow: hidden;text-align: left"> ' + column.columnComment + ' </span>' +
                            '</div>'
                    }
                    $("#prod").html(prodStr)
                    // 打开表格，显示详情
                    layer.open({
                        type: 1,
                        title: '数据表详情',
                        maxmin: true,
                        skin: 'layui-layer-lan',
                        shadeClose: true, //点击遮罩关闭层
                        area: ['1200px', '500px'],
                        content: $('#detail')
                    });
                }
            });
        });
    });
});
